<template>
  <ZDropdown :label="dateValue" button-class="input w-full" placement="start">
    <ZCalendar v-model="modelValue" />
  </ZDropdown>
</template>
<script setup lang="ts">
import { computed } from "vue";
import ZDropdown from "../ui/ZDropdown.vue";
import ZCalendar from "./ZCalendar.vue";
import { formatDate } from "@vueuse/core";

const modelValue = defineModel<string>();
const dateValue = computed(() => {
  return modelValue.value
    ? formatDate(new Date(modelValue.value), "YYYY-MM-DD")
    : formatDate(new Date(), "YYYY-MM-DD");
});
</script>
